/* eslint-disable no-script-url */

import React from 'react';
import { Button, Input, Radio } from 'zent';
import {Popover} from 'antd';
import { DesignEditor, ControlGroup } from 'zent/lib/design/editor/DesignEditor';
import { DEFAULT_BACKGROUND } from 'zent/lib/design/preview/constants';
import { COLOR_TYPE } from './constants';
import styles from './index.less';

const RadioGroup = Radio.Group;
export default class ConfigEditor extends DesignEditor {

  constructor(props) {
    super(props);
    this.state={
      inputValue:""
    }
    this.inputRef = "";
    this.isCompositions = true;    
  }

  componentDidMount(){
    window.Isoption = true; 
     const {value} = this.props;
     const that=this;        
    //  this.inputRef.input.addEventListener('compositionstart', function(){//非直接的文字输入时（键盘输入中文的拼音）
    //       this.isCompositions = false;
    //       console.log('start')
    //   }.bind(this))
    //   this.inputRef.input.addEventListener('compositionend', function(){//直接输入文字后（键盘选择真实的汉字）
    //     this.isCompositions = true;
    //     console.log('end')
    //     value.name=that.inputRef.input.value;                     
    //               that.props.onChange({
    //                 ...value
    //               })
    //               emitter.emit('ItemChange',value);
    //   }.bind(this))
      this.inputRef.input.addEventListener('input', function(){                
          // let selectionStart = this.inputRef.input.selectionStart;
          // let selectionEnd = this.inputRef.input.selectionEnd; 
          // console.log('赋值',value,that.inputRef.input.value,this.isCompositions)         
          value.name=that.inputRef.input.value;                     
          that.props.onChange({
            ...value
          })
          emitter.emit('ItemChange',value);
                
      }.bind(this));
  } 

  componentWillMount() {
    window.Isoption = false;
  }

  onInputChange= (e) =>{
    const {value} = this.props;   
    let selectionStart = e.target.selectionStart;
    let selectionEnd = e.target.selectionEnd;          
    // console.log(selectionStart,selectionEnd)
    // if(selectionStart==selectionEnd){
    //   value.name=e.target.value;   
    //   this.props.onChange({
    //     ...value
    //   })
    //   emitter.emit('ItemChange',value);
    // }   
  }

  onSpecificationsTypeChange = (e) =>{
    const {value} = this.props;
    value.specificationsType=e.target.value;  
    this.props.onChange({
      ...value
    })
    emitter.emit('ItemChange',value);    
  }

  onDetailTypeChange = (e) =>{
    const {value} = this.props;
    value.detailType=e.target.value;  
    this.props.onChange({
      ...value
    })
    emitter.emit('ItemChange',value);
  }

  handlingComposition = ()=>{
    this.isCompositionEnd = false;
  }

  handleComposition = (e) => {
    console.log(e,788)
     // this.isCompositionEnd = true;
      // const {value} = this.props;
      // value.name=e.target.value;   
      // this.props.onChange({
      //   ...value
      // })
      // emitter.emit('ItemChange',value);
  }

  onRef = (ref) =>{
    this.inputRef=ref;
    
  }

  render() {
    const { value, settings, prefix, showError, validation } = this.props;
    const content=<img src={'https://pro.modao.cc/uploads3/images/2871/28719100/v2_pjo2zc.png'} />;
    return (
      <div>
        <div className={`xkd-moduleTitle`} style={{ fontSize: '14px' }}>
          商品页模板
        </div>
        <div className={`${prefix}-design-component-config-editor`}>
          <ControlGroup
            showError={showError || this.getMetaProperty('name', 'touched')}
            error={validation.name}
            required
            label="模板名称："
            className={`xkd-ml-4 ${styles.inputGroup}`}
          >
            <Input
              value={value.name}
              onChange={this.onInputChange}
              // onCompositionStart={this.handlingComposition} 
              // onCompositionUpdate={this.handlingComposition} 
              // onCompositionEnd={this.handleComposition} 
             // onBlur={this.onInputBlur}
              name="name"
              placeholder="最多20个字符"
              ref = {this.onRef}
              style={{width:212}}
            />
          </ControlGroup>
          <ControlGroup
            label="规格样式："
            labelAlign="top"
            className={`${prefix}-design-component-config-editor__background`}
            focusOnLabelClick={false}
            showError={showError || this.getMetaProperty('specificationsType', 'touched')}
            error={validation.specificationsType}
          >
            <RadioGroup value={value.specificationsType} onChange={this.onSpecificationsTypeChange}>
              <Radio name="specificationsType" value={COLOR_TYPE.SYSTEM}>
                <span className="xkd-mr8">折叠版</span>
                <Popover placement="bottom"  content={content} trigger="hover">
                  <a>示例</a>
                </Popover>
              </Radio>
              <Radio name="specificationsType" value={COLOR_TYPE.CUSTOM}>
                <span className="xkd-mr8">展开版</span>
                <Popover placement="bottom"  content={content} trigger="hover">
                  <a>示例</a>
                </Popover>
              </Radio>
            </RadioGroup>
          </ControlGroup>  
          <ControlGroup
            label="详情样式："
            labelAlign="top"
            className={`${prefix}-design-component-config-editor__background`}
            focusOnLabelClick={false}
            showError={showError || this.getMetaProperty('detailType', 'touched')}
            error={validation.detailType}
          >
            <RadioGroup value={value.detailType} onChange={this.onDetailTypeChange}>
              <Radio name="detailType" value={COLOR_TYPE.SYSTEM}>
                <span className="xkd-mr8">折叠版</span>
                <Popover placement="bottom"  content={content} trigger="hover">
                  <a>示例</a>
                </Popover>
              </Radio>
              <Radio name="detailType" value={COLOR_TYPE.CUSTOM}>
                <span className="xkd-mr8">展开版</span>
                <Popover placement="bottom" content={content} trigger="hover">
                  <a>示例</a>
                </Popover>
              </Radio>
            </RadioGroup>
          </ControlGroup>          
        </div>
      </div>
    );
  }

  static designType = 'config';
  static designDescription = '页面配置';  
  static getInitialValue() {
    return {
      // 模板名称
      name: '',
      specificationsType: 1,
      detailType:1
    };
  }
  static validate(value) {
    return new Promise(resolve => {
      const errors = {};
      const { name } = value;
       if (!name || !name.trim()) {
        errors.name = '模板名称必填，最多20个字';
      } else if (name.length > 20) {
        errors.name = '模板名称必填，最多20个字';
      }

      resolve(errors);
    });
  }
}
